<template>
	<view class="page">
		<view class="header">
			<view class="header-left" @tap="goBack">
				<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
			</view>
			<view class="header-title">学生管理</view>
			<view class="header-right"></view>
		</view>

		<view class="content">
			<view class="search-section">
				<view class="search-box">
					<uni-icons type="search" size="20" color="#999"></uni-icons>
					<input class="search-input" placeholder="搜索学生昵称或真名" v-model="searchKeyword" />
				</view>
			</view>


			<view class="student-list">
				<view class="student-item" v-for="(student, index) in filteredStudentList" :key="index">
					<view class="student-info">
						<image v-if="student.avatar" :src="student.avatar" class="avatar"></image>
						<view v-else class="avatar placeholder-avatar">
							<text class="avatar-text">{{ student.nickName.charAt(0) }}</text>
						</view>
						<view class="student-details">
							<text class="student-name">{{ student.nickName }}</text>
							<text class="student-realname">真名: {{ student.realName }}</text>
							<view class="student-meta">
								<text class="meta-item">性别: {{ student.gender }}</text>
								<text class="meta-item">年龄: {{ student.age }}</text>
							</view>
						</view>
					</view>
					<view class="student-actions">
						<button class="action-btn notify-btn" @tap="sendNotification(student)">通知</button>
						<button class="action-btn remove-btn" @tap="removeStudent(index)">移除</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 发送通知模态框 -->
		<view v-if="showNotificationModal" class="modal-overlay" @tap="closeNotificationModal">
			<view class="modal-content notification-modal" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">发送通知</text>
					<uni-icons type="close" size="20" color="#999" @tap="closeNotificationModal"></uni-icons>
				</view>
				<view class="modal-body">
					<view class="notification-to">
						<text>收件人: {{ selectedStudent.nickName }}</text>
					</view>
					<view class="form-item">
						<text class="form-label">通知标题</text>
						<input class="form-input" v-model="notificationForm.title" placeholder="请输入通知标题" />
					</view>
					<view class="form-item">
						<text class="form-label">通知内容</text>
						<textarea class="form-textarea" v-model="notificationForm.content" placeholder="请输入通知内容"></textarea>
					</view>
					<view class="form-actions">
						<button class="cancel-btn" @tap="closeNotificationModal">取消</button>
						<button class="confirm-btn" @tap="sendNotificationConfirm">发送</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';

	const searchKeyword = ref('');
	const showNotificationModal = ref(false);
	const selectedStudent = ref({});

	const notificationForm = ref({
		title: '',
		content: ''
	});

	// 模拟学生数据，包含指定字段
	const studentList = ref([
		{
			nickName: '小明',
			avatar: '',
			gender: '男',
			age: '18',
			realName: '张小明',
			attendanceRate: 95,
			homeworkCompletionRate: 88
		},
		{
			nickName: '小红',
			avatar: '',
			gender: '女',
			age: '17',
			realName: '李小红',
			attendanceRate: 87,
			homeworkCompletionRate: 92
		},
		{
			nickName: '小刚',
			avatar: '',
			gender: '男',
			age: '19',
			realName: '王小刚',
			attendanceRate: 92,
			homeworkCompletionRate: 78
		},
		{
			nickName: '小丽',
			avatar: '',
			gender: '女',
			age: '18',
			realName: '赵小丽',
			attendanceRate: 78,
			homeworkCompletionRate: 85
		},
		{
			nickName: '小强',
			avatar: '',
			gender: '男',
			age: '18',
			realName: '刘小强',
			attendanceRate: 100,
			homeworkCompletionRate: 100
		}
	]);

	const filteredStudentList = computed(() => {
		if (!searchKeyword.value) {
			return studentList.value;
		}
		return studentList.value.filter(student => 
			student.nickName.includes(searchKeyword.value) || 
			student.realName.includes(searchKeyword.value)
		);
	});


	const removeStudent = (index) => {
		uni.showModal({
			title: '确认移除',
			content: `确定要将 ${studentList.value[index].nickName} 移出班级吗？`,
			success: function (res) {
				if (res.confirm) {
					studentList.value.splice(index, 1);
					uni.showToast({
						title: '移除成功',
						icon: 'success'
					});
				}
			}
		});
	};

	const sendNotification = (student) => {
		selectedStudent.value = student;
		showNotificationModal.value = true;
	};

	const sendNotificationConfirm = () => {
		if (!notificationForm.value.title) {
			uni.showToast({
				title: '请输入通知标题',
				icon: 'none'
			});
			return;
		}

		if (!notificationForm.value.content) {
			uni.showToast({
				title: '请输入通知内容',
				icon: 'none'
			});
			return;
		}

		// 模拟发送通知
		uni.showLoading({
			title: '发送中...'
		});

		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '通知发送成功',
				icon: 'success'
			});
			closeNotificationModal();
		}, 1000);
	};

	const closeNotificationModal = () => {
		showNotificationModal.value = false;
		notificationForm.value = {
			title: '',
			content: ''
		};
	};

	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style>
	.page {
		min-height: 100vh;
		background-color: #f8f9fa;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.header-left,
	.header-right {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.content {
		padding: 30rpx;
	}

	.search-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
	}

	.search-input {
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
		margin-left: 10rpx;
		background: transparent;
		border: none;
		outline: none;
	}


	.student-list {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	}

	.student-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
	}

	.student-item:not(:last-child) {
		border-bottom: 1rpx solid #eee;
	}

	.student-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #1976D2, #64B5F6);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.placeholder-avatar {
		background: linear-gradient(135deg, #1976D2, #64B5F6);
	}

	.avatar-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.student-details {
		display: flex;
		flex-direction: column;
	}

	.student-name {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 6rpx;
		font-weight: 500;
	}

	.student-realname {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 6rpx;
	}

	.student-meta {
		display: flex;
	}

	.meta-item {
		font-size: 20rpx;
		color: #999;
		margin-right: 15rpx;
	}

	.student-actions {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.action-btn {
		width: 100rpx;
		height: 50rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: none;
	}

	.notify-btn {
		background-color: #1976D2;
		color: #fff;
	}

	.remove-btn {
		background-color: #f44336;
		color: #fff;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		width: 80%;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		max-height: 80vh;
	}

	.notification-modal {
		max-height: 70vh;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 30rpx;
	}

	.notification-to {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 30rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #e9ecef;
		border-radius: 12rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		background-color: #f8f9fa;
	}

	.form-input:focus {
		border-color: #1976D2;
		outline: none;
	}

	.form-textarea {
		width: 100%;
		height: 200rpx;
		border: 1rpx solid #e9ecef;
		border-radius: 12rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		resize: none;
		background-color: #f8f9fa;
	}

	.form-textarea:focus {
		border-color: #1976D2;
		outline: none;
	}

	.form-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.cancel-btn,
	.confirm-btn {
		width: 45%;
		height: 80rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		border: none;
	}

	.cancel-btn {
		background-color: #fff;
		color: #333;
		border: 1rpx solid #ddd;
	}

	.confirm-btn {
		background-color: #1976D2;
		color: #fff;
	}
</style>